<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            margin: 0 auto;
        }
        #tupianlunbo{
            width: 772px;
            height: 460px;
        }
        #lunbo_img ul{
            list-style: none;
        }
        #lunbo_img img{
            width:771px;
            height: 460px;
        }
        #lunbo_img ul li{
            position: absolute;
            top: 0px;
            margin:0 auto;
            width:771px;
            height: 460px;
        }
        #cricle_botton ul{
            list-style: none;
            position: relative;
            z-index: 99;
            height: 25px;
            width: 200px;
            margin: 0 auto;

        }
        #cricle_botton ul li{
            height: 15px;
            width: 15px;
            border-radius: 50%;
            margin: 5px;
            background-color: inherit;
            background-color: white;
            float: left;
            position: relative;
            top: 400px;
        }
        #cricle_botton .active{
            background-color: red;
        }
        #up_down{
            position: relative;
            z-index: 99;
        }
        #up_down span{
            display: block;
            width: 50px;
            height: 100px;
            background-color: black;
            opacity: 0.4;
            position: relative;
            top: 150px;
            color:white ;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
        }
        #up_down span:hover{
            opacity: 0.5;
        }
        #up{
            float: left;
        }
        #down{
            float: right;
        }
    </style>
    <script src="../js/jquery-3.2.1.js"></script>
    <script>
        var num=0;
        var t;
        var move=function(){
            if(num==8){
                num=0
            }
            $("#lunbo_img ul li ").eq(num).fadeIn("slow").siblings().fadeOut("slow");
            $("#cricle_botton ul li ").eq(num).addClass("active").siblings().removeClass("active");
            num=num+1;
        }

        //li轮播
        $(function(){
            $("#lunbo_img  ul li").hide()
            $("#lunbo_img  ul li").eq(0).show()
            $("#cricle_botton ul li ").mouseover(function(){
                var index=$(this).index();
                $("#lunbo_img ul li").eq(index).show().siblings().hide();
                $("#cricle_botton ul li").eq(index).addClass("active").siblings().removeClass("active");
            })
            //自动轮播
            t=setInterval(move,2000);
            //暂停自动轮播和继续轮播
            $("#tupianlunbo").mouseover(function(){
                clearInterval(t);

            })
            $("#lunbo_img").mouseout(function(){
                t=setInterval(move,2000);
            })
            //前翻页和后翻页
            $("#up").click(function(){

                num=num-1;
                $("#lunbo_img ul li").eq(num).show().siblings().hide();

                $("#cricle_botton ul li").eq(num).addClass("active").siblings().removeClass("active");
                if(num==-1){
                    num=8;
                }

            })
            $("#down").click(function(){
                num=num+1;
                $("#lunbo_img ul li").eq(num).show().siblings().hide();
                $("#cricle_botton ul li").eq(num).addClass("active").siblings().removeClass("active");

                if(num==9){
                    num=0;
                }
            })
        })



    </script>
</head>
<body>
    <div id="tupianlunbo">
        <div id="lunbo_img">
            <ul>
                <li><img src="1.png"/></li>
                <li><img src="2.jpg"/></li>
                <li><img src="3.jpg"/></li>
                <li><img src="4.jpg"/></li>
                <li><img src="5.jpg"/></li>
                <li><img src="6.jpg"/></li>
                <li><img src="7.jpg"/></li>
                <li><img src="8.jpg"/></li>
            </ul>
        </div>
        <div id="cricle_botton">
            <ul>
                <li class="active"></li>
                <li ></li>
                <li ></li>
                <li ></li>
                <li ></li>
                <li ></li>
                <li ></li>
                <li ></li>
            </ul>
        </div>
        <div id="up_down">
            <span id="up"><</span>
            <span id="down"> ></span>
        </div>
    </div>

</body>
</html>